<template>
  <view>
    <u-style-divider v-if="isStyleDivider" v-bind="$props"  />
    <view
      v-else
      :class="['al-divider', dashed, solid]"
      :style="{
        ...defaultStyle,
        ...gradualChange.config,
        '--borderBottomColor': backgroundColor
      }"
    >
      {{ titleValue }}
    </view>
  </view>
</template>

<script>
  import mpConfig from '../../libs/mixin/mp-vertual-node.js';
  import UStyleDivider from './styleDivider.vue';
  export default {
    name: 'u-custom-divider',
    options: mpConfig,
    props: {
      config: {
        type: Object,
        default: () => {}
      },
      title: {
        type: String,
        default: '分割线'
      },
      hideLabel: {
        type: Boolean,
        default: false
      },
      height: {
        type: String,
        default: '35px'
      },
      backgroundColor: {
        type: String,
        default: 'rgba(235,241,255,1)'
      },
      gradualChange: {
        type: Object,
        default: () => {}
      },
      titleColor: {
        type: String,
        default: 'rgba(56,117,255,1)'
      },
      opacitySection: {
        type: Array,
        default: () => [0.1, 0]
      }
    },
    components: {
      UStyleDivider
    },
    data() {
      return {};
    },
    computed: {
      titleValue() {
        return this.hideLabel ? '' : this.title;
      },
      showBorderBottomDashed() {
        return !this.titleValue && this.gradualChange.gradualChange === 'border-bottom-dashed';
      },
      dashed() {
        return this.showBorderBottomDashed ? 'border-bottom-dashed' : '';
      },
      solid() {
        return this.showBorderBottomSolid ? 'border-bottom-solid' : '';
      },
      defaultStyle() {
        let style = {};
        let borderBottomColor = '';
        const { borderBottom } = this.gradualChange;
        // 如果设置底部边框线, 不设置背景色,不设置左边框样式
        if (!borderBottom) {
          style = {
            background: this.backgroundColor
          };
        }
        // 当选择类型是水平实线或虚线时，根据分割线颜色更新下边框的颜色
        if (borderBottom) {
          if (this.gradualChange.gradualChange === 'border-bottom-solid') {
            borderBottomColor = `1px solid ${this.backgroundColor}`;
          }
          if (this.gradualChange.gradualChange === 'border-bottom-dashed') {
            borderBottomColor = `1px dashed ${this.backgroundColor}`;
          }
        }

        style = Object.assign(style, {
          color: this.titleColor,
          lineHeight: this.height,
          height: this.height,
          borderLeft: borderBottom ? '' : `4px solid ${this.titleColor}`,
          borderBottom:
            !this.titleValue &&
            ['border-bottom-dashed', 'border-bottom-solid'].includes(this.gradualChange.gradualChange)
              ? ''
              : borderBottomColor // 如果没有标题,仅仅是需要一条直线或者虚线,使用after伪类实现,目的是节约上方多余空间
        });
        return style;
      },
      isStyleDivider() {
        return this.gradualChange.gradualChange.startsWith('dividerStyle');
      }
    }
  };
</script>

<style scoped lang="scss">
  $fontSizeColor: var(--fontSizeColor);
  $backgroundColor: var(--backgroundColor);

  .u-divider {
    width: 100%;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: row;
  }

  .u-divider-line {
    border-bottom: 1px solid #e4e7ed;
    transform: scale(1, 0.5);
    transform-origin: center;

    &--bordercolor--primary {
      border-color: #2979ff;
    }

    &--bordercolor--success {
      border-color: #19be6b;
    }

    &--bordercolor--error {
      border-color: #2979ff;
    }

    &--bordercolor--info {
      border-color: #909399;
    }

    &--bordercolor--warning {
      border-color: #ff9900;
    }
  }

  .u-divider-text {
    white-space: nowrap;
    padding: 0 8px;
    display: inline-flex;
  }

  .al-divider {
    text-indent: 1em;
    text-align: left;
    border-width: 7px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0;
    border-style: none;
    &.border-bottom-solid {
      position: relative;
      &::after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 50%;
        height: 1px;
        width: 100%;
        border-bottom: 1px solid var(--borderBottomColor);
      }
    }
    &.border-bottom-dashed {
      position: relative;
      &::after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 50%;
        height: 1px;
        width: 100%;
        border-bottom: 1px dashed var(--borderBottomColor);
      }
    }
  }
</style>
